<template>
    <div class="hospital">
        <!--左侧导航区 -->
        <div class="menu">
            <div class="top"><i class="ri-hospital-line"></i><span>会员中心</span></div>
            <!-- 菜单栏 -->
            <el-menu class="el-menu-vertical-demo">
                <el-menu-item index="/user/certification" @click="changeActive('/user/certification')">
                    <el-icon><icon-menu /></el-icon>
                    <i class="ri-time-fill"></i><span>实名认证</span>
                </el-menu-item>
                <el-menu-item index="/user/order" @click="changeActive('/user/order')">
                    <el-icon>
                        <document />
                    </el-icon>
                    <i class="ri-information-line"></i><span>挂号订单</span>
                </el-menu-item>
                <el-menu-item index="/user/patient" @click="changeActive('/user/patient')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <i class="ri-megaphone-line"></i><span>就诊人管理</span>
                </el-menu-item>
                <el-menu-item index="/user/profile" @click="changeActive('/user/profile')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <i class="ri-stop-circle-line"></i><span>账号管理</span>
                </el-menu-item>
                <el-menu-item index="/user/feedback" @click="changeActive('/user/feedback')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <i class="ri-calendar-close-line"></i><span>意见反馈</span>
                </el-menu-item>
            </el-menu>
        </div>
        <!-- 右侧内容展示区 -->
        <div class="content">
            <!-- 子组件展示的地方 -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
// 获取仓库对象

import 'remixicon/fonts/remixicon.css'

import{useRouter} from 'vue-router'
import { useRoute } from 'vue-router'

let $router = useRouter()
let $route = useRoute()
const changeActive = (path:string)=>{
    // 跳转到对应的二级路由器
    $router.push({path,query:{hoscode: $route.query.hoscode}})
}
</script>

<style lang="scss" scoped>
.hospital {
    display: flex;
    span{
        margin-left: 5px;
    }
    .menu{
        flex: 2;
        .top{
            margin: 10px 0;
            color: rgb(116, 118, 120);
            padding-left: 60px;
        }
    }
    .content{
        flex: 8;
        margin-left: 30px;
    }
}
</style>